<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点我试试</button>
    <div>胡歌</div>
    <script>
        // 鼠标点击事件 onclick
        // 三要素：事件源  事件类型 事件处理
        // 1，事件源 被触发的对象 按钮 
        var btn = document.getElementById('btn')
        //  2，事件类型 鼠标点击事件 onclick
        //  3，事件处理
        btn.onclick = function () {
            alert('点尼玛嫩.......')
        }


        // 执行步骤
        // 1，获取事件源
        var div = document.querySelector('div')
        //  2,绑定事件 注册事件
        // 3，添加事件处理程序
        div.onclick = function () {
            console.log('我回来了....');
        }





        // 常见鼠标事件
        // onclick        鼠标点击触发
        // onmouseover    鼠标经过触发
        // onmouseout     鼠标离开触发
        // onfocus        获得鼠标焦点触发
        // onablur        失去鼠标焦点触发 
        // onmousemove    鼠标移动触发
        // onmouseup      鼠标弹起触发
        // onmousedown    鼠标按下触发
    </script>
</body>

</html>